<template>
  <div @click="init" class="test-clock-container">
    <flip-clock/>
    <audio loop="loop" preload="auto" id="audioBir">
      <source src="../assets/happybirthday.mp3" type="audio/mpeg">
    </audio>
  </div>
</template>
<script>
import FlipClock from "kuan-vue-flip-clock";

export default {
  components: {
    FlipClock,
  },
  data() {
    return {
      countdown: 0,
      targetTime: new Date("2024/12/05,17:13:00").getTime(),
    };
  },
  mounted() {
    this.startCountdown()
  },
  methods: {
    startCountdown() {
      const interval = setInterval(() => {
        const now = new Date().getTime();
        this.countdown = Math.floor((this.targetTime - now) / 1000);

        if (this.countdown <= 0) {
          clearInterval(interval);
          this.redirectToPage();
        }
      }, 1000);
    }
    ,
    redirectToPage() {
      window.location.href = "http://192.168.110.177:8080/perverse.html";
      this.init()
    }
    ,
    init() {
      var audioBir = document.getElementById("audioBir");
      audioBir.play()
    }
  }
};
</script>
<style lang="scss">
.test-clock-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font: normal 14px "Helvetica Neue", Helvetica, sans-serif;
  user-select: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .test-clock-container {
    transform: rotateZ(90deg);
  }
}

#audioBir {
  //display: none;
}
</style>

